<template>
	<div class="page-personal">
		<div class="top">
			<div class="top-cont">
				<!--<input @change="upload" class="upload" ref="upload" type="file" />-->
				<img src="../assets/img/head-default.png" />
			</div>
		</div>
		<ul v-if="user" class="clearFix">
			<li v-if="user.userName">
				<label>店名</label>
				<p>{{user.userName}}</p>
			</li>
			<li v-if="user.companyNO">
				<label>店编</label>
				<p>{{user.companyNO}}</p>
			</li>
			<li v-if="user.city">
				<label>公司地址</label>
				<p>{{user.city}}</p>
			</li>
			<li v-if="user.area">
				<label>公司面积</label>
				<p>{{user.area}}</p>
			</li>
		</ul>
		<ul v-if="user" class="clearFix">
			<li>
				<!--<router-link to="/editName">-->
					<label>姓名</label>
					<p>{{user.name}}</p>
				<!--	<i></i>
				</router-link>-->
			</li>
			<li v-if="user.account.length==11">
				<router-link to="/editPhone">
					<label>手机号</label>
					<p>{{user.mobile}}</p>
					<i></i>
				</router-link>
			</li>
			<li v-else>
				<label>手机号</label>
				<p>{{user.mobile}}</p>
				<i></i>
			</li>
			<li>
				<router-link to="/editPassword">
					<label>修改密码</label>
					<p></p>
					<i></i>
				</router-link>
			</li>
		</ul>
		<ul class="clearFix">
			<li>
				<label>版本信息</label>
				<p>1.0.0</p>
			</li>
		</ul>
		<div class="ctl-cont">
			<button @click.stop="openlist">退出登录</button>
		</div>

		<div @click.stop="closelist" v-if="listStatus" class="openlist">
        	<ul @click.stop="">
        		<li @click.stop="logout" class="logout">确认退出</li>
        		<li @click.stop="closelist" class="cancle">取消</li>
        	</ul>
        </div>
    </div>
</template>

<script>
import http from '../services/http';
import Dropzone from 'vue2-dropzone';
import { mapState } from 'vuex';

export default {
	name: 'personal',
	data:function(){
		return{
			listStatus:false,
		}
	},
	computed: {
	    ...mapState({
	      token: state => state.user.token,
	      user: state => {console.log(state.user);return state.user.userinfo},
	    })
	},
	props:['toast','homeSelect'],
	methods:{
		upload(e){
			const reader = new FileReader();
			let { user, toast } = this;
			const file = this.$refs.upload.files[0];
			if(!/image\/\w+/.test(file.type)) {
				this.toast("请确保文件为图像类型");
				return false;
			}
			reader.readAsDataURL(file);
			reader.onload = function() {
				const photo = this.result.split(",")[1];
				http.post('/upm/api/v1/protected/user/photo',{
				    "photo":photo
				},function(data){
					if(data.success){
						user.photo = `data:image/png;base64,${photo}`;
						toast("头像更新成功！");
					}else{
						toast("头像更新失败！");
					}
				});
			}
		},
		openlist(){
    		this.listStatus = true;
    	},
    	closelist(){
    		this.listStatus = false;
    	},
    	logout(){
    		this.$store.commit({ type: 'logout' });
    		this.$router.push({ path: '/login' });
    		this.listStatus = false;
    	}
	},
    components: {
        Dropzone
    },
    created(){
    	this.user&&this.$store.dispatch({
			type:"getUserInfo",userNo:this.user.mobile
		});
    	if(this.$route.query.homeSelect){
	  		this.homeSelect(this.$route.query.homeSelect);
		}
    },
    beforeRouteEnter(to, from, next){
    	next(vm=>{
    		if(vm.token){
        		next();
        	}else{
        		vm.toast("请先登录！");
        		vm.$router.push({ path: '/login' });
        	}
    	})
	},
};


    
</script>
<style lang="scss">

.page-personal{
	.top{
		height: 160px;
		background: transparent url(../assets/img/bg/personal-bg.jpg) no-repeat center / 100% 100%;
		position: relative;
		
		.top-cont{
			height: 90px;
			width: 90px;
			border-radius:50%;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -45px 0 0 -45px;
			overflow: hidden;
		}
		.upload{
			height: 90px;
			width: 90px;
			border-radius:50%;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -45px 0 0 -45px;
			opacity: 0;
			z-index: 20;
			min-height: 0;
		    padding: 0;
		    background: transparent;
		    border: none;
			
			.dz-message{
				display: none;
			}
			.dz-preview{
			    position: absolute;
			    left: 0;
			    top: 0;
			    margin: 0;
			    border: none;
			    height: 90px;
			    width: 90px;
			    min-height: 0;
			    border-radius: 50%;
			    overflow: hidden;
			    
			    .dz-image {
				    height: 90px!important;
				    width: 90px!important;
				    border-radius: 50%!important;
				}
				
				.dz-details{ display: none; }
				.dz-error-message{ display: none; }
				.dz-remove{ display: none; }
				.dz-error-mark{ display: none; }
				.dz-success-mark{ display: none; }
			}
		}
		img{
			height: 90px;
			width: 90px;
			position: absolute;
			top: 0;
			left: 0;
			margin: 0;
			z-index: 10;
		}
	}
	
	ul{
		margin-top: 10px;
		background: #ffffff;
		padding: 0 15px;
		width: 100%;
		
		li{
			position: relative;
			height: 51px;
			border-bottom: solid 1px #e6e6e6;
			line-height: 50px;
			
		}
		li:last-child{
			border: none;
		}
		li.last{
			border-bottom: none;
		}
		li label{
			position: absolute;
			left: 0;
			top: 0;
			color: #666666;
			font-size: 1rem;
		}
		li p{
			color: #222222;
			width: 100%;
			border: none;
			height: 100%;
			background: #ffffff;
			text-align: right;
			padding-left: 40px;
			text-overflow:ellipsis ;
			overflow: hidden;
			white-space: nowrap;
			font-size: 1rem;
		}
		li a{
			display: block;
			height: 100%;
			width: 100%;
			
			p{
				padding-right: 20px;
				color: #979797;
			}
		}
		li i{
			display: block;
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			width: 10px;
			background: transparent url(../assets/img/icon/register-right.png) no-repeat center / 6px auto;
		}
	}
	
	.ctl-cont{
		background: #ffffff;
		margin-top: 10px;
		height: auto;
		
		button{
			color: #37d863;
			height: 50px;
			line-height: 50px;
			text-align: center;
			width: 100%;
			background: #ffffff;
			font-size: 1rem;
		}
	}
	
	.openlist{
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0,0,0,0.4);
		animation:openPhoneList .2s ease-in-out;
		
		ul{
			position: fixed;
			width: 100%;
			left: 0;
			right: 0;
			bottom: 0;
			background: #f5f5f5;
			padding: 0;
			
			li{
				height: 50px;
				line-height: 50px;
				text-align: center;
				background: #ffffff;
				font-size: 0.85rem;
				color: #979797;
				cursor: pointer;
				&.logout{
					font-size: 1.05rem;
					color: #2dbe60;		
					margin-bottom: 5px;
					border-top: solid 1px #e6e6e6;
				}
				&.cancle{
					font-size: 1.05rem;
					color: #666666;		
				}
			}
		}
	}
	@keyframes openPhoneList{
	    0%{opacity: 0;}
	    100%{opacity: 1;}
	}
	
}









</style>
